<template>
	<view class="container" style="background-color: white;">
		<!-- 导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			titleStyle="{height: '52px'}" title="设备管理" @clickLeft="back">
			<block slot="right">
				<view class="city">

				</view>
			</block>
		</uni-nav-bar>

		<!-- 顶部tab -->
		<u-line :dashed="false" style="margin: -2px;"></u-line>

		<!-- 搜索栏 -->
		<u-search v-model="search" :show-action="false" :animation="false" inputAlign="center" @change="loadmore"
			style="padding: 10px;">
		</u-search>
		<u-line :dashed="false" style="margin: -2px;"></u-line>
		
		<!-- tags -->
		<view class="u-page__tag-item" v-for="(item, index) in status" :key="index">
			<u-tag :name="index" :text="item.text" :plain="!item.checked" shape="circle" :style="item.style"
				@click="radioClick"></u-tag>
		</view>

		<u-line :dashed="false" style="margin: -2px;"></u-line>

		<!-- 列表 -->
		<scroll-view class="scroll-list" scroll-y="true">
			<view class="uni-contract-list" v-for="(contract, index) in contractList" :key="index">
				<view class="uni-contract-list-cell" @click="contractClick(contract)">
					<view class="uni-contract-list-body">
						<view class="uni-contract-list-item-content">
							<view class=""><text>{{contract.name}}</text></view>
							<text class="uni-contract-list-item-content-step">
								<view>
									<span>{{contract.code}}</span></p>
									<span>{{contract.specification}} {{format(contract.inspectedDate)}}</span>
								</view>
							</text>
						</view>
						<view class="uni-contract-list-item-extra"><text
								class="uni-contract-list-item-extra-text"><span>></span></text></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-action-sheet :actions="actions" @close="closeActionSheet" :show="showActionSheet" cancelText="取消"
			@select="selectClick"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: [
					{
						text: "已领用",
						checked: true,
						style: "float:left; margin: 10px 10px 10px 10px;",
					},
					{
						text: "未领用",
						checked: false,
						style: "float:left; margin: 10px 10px 10px 10px;",
					}
				],
				actions: [{
						name: '查看详情'
					},
					{
						name: '审核'
					},
					{
						name: '退审'
					},
					{
						name: '创建任务'
					}
				],
				showActionSheet: false,
				selectedcontract: {},
				actionRoutes: {
					'查看详情': {
						url: '/pages/contract/detail?edit=false&id='
					},
					'编辑详情': {
						url: '/pages/contract/detail?edit=true&id='
					},
					'审核': {
						url: '/pages/contract/detail?edit=true&id='
					},
					'创建任务': {
						url: '/pages/task/detail?action=create&contractId='
					},
					'提交审核': {
						url: '/pages/contract/detail?id='
					}
				},
				selectedTab: '待评审',
				curNow: 0,
				contractList: [],
				search: "",
				selectedTag: '已领用'
			}
		},
		onLoad() {
			// this.onTabChange({
			// 	id: "1",
			// 	index: 0,
			// 	name: "待评审"
			// })
			this.loadmore()
		},
		methods: {
			onTabChange(i) {
				this.selectedTab = i;
				this.loadmore();
			},
			closeActionSheet() {
				this.showActionSheet = false;
			},
			contractClick(contract) {
				
				this.selectedcontract = contract;
				// this.actions = this.tabs[this.selectedTab.index].actions
				// this.showActionSheet = true;
			},
			selectClick(index) {
				//跳转到具体页面
				var route = this.actionRoutes[index.name];
				if (route.url) {
					this.navTo(route.url + this.selectedcontract.id);
				} else if (route.modal) {
					this[route.modal + ''] = !this[route.modal + ''];
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			scrolltolower() {
				this.loadmore()
			},
			radioClick(i) {
				var this_ = this;
				this.status.map((item, index) => {
					item.checked = index === i ? true : false
					if (item.checked) {
						this_.selectedTag = item.text;
						//从tags数据中读取action内容，实现切换tag，action切换
						// this_.actions = item.actions;
						// uni.setStorage({
						// 	key: 'sampleManageSelectedTagIndex',
						// 	data: i
						// });
					}
				})
				this_.loadmore();
			},
			loadmore() {
				var this_ = this;
				
				var params = {
					params: {
						isAccept: this.selectedTag,
						name: this.search,
						pageNum: 1,
						pageSize: 100
					}
				}
				this_.$u.api.device.list(params).then(res => {
					
					this_.contractList = res.rows;
				});
			},
			format(time) {
				return this.$moment(time).format('YYYY-MM-DD')
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.uni-title {
		font-size: 30rpx;
		color: #333333;
		padding: 10px;
		background: #fff;
		border-top: 1px solid #ededed;
		margin-top: 20rpx;
	}

	.uni-contract-list-item-content-step {
		margin-top: 2px;
		color: #999;
		font-size: 13px;
		overflow: hidden;
		line-height: 18px;
	}

	.uni-contract-list-item-extra {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.uni-contract-list-item-extra-text {
		color: #999;
		font-size: 18px;
	}

	.uni-contract-list-body {
		position: relative;
		display: flex;
		flex-direction: row;
		padding: 12px 15px;
		padding-left: 15px;
		flex: 1;
		overflow: hidden;
	}

	.uni-contract-list-item-content {
		display: flex;
		padding-right: 8px;
		flex: 1;
		color: #3b4144;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.uni-contract-list-text-top {
		height: 40rpx;
		overflow: hidden;
		width: 100%;
		line-height: 40rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.uni-contract-list-text-bottom {
		width: 100%;
		line-height: 28px;
		font-size: 26rpx;
		color: #666666;

		span {
			margin-right: 10rpx;
		}
	}
</style>
